
<template>
    <el-container>
      <el-aside width="200px" height="100%">
        <div class="Admin">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                default-active="2"
                text-color="#fff"
                @open="handleOpen"
                @close="handleClose"
                :router="true"
              >
                <el-menu-item index="/categoryEchart">
                  <el-icon><setting /></el-icon>
                  <span>数据可视化</span>
                </el-menu-item>
  
                <el-sub-menu index="3">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>机器类型管理</span>
                  </template>
  
                  <el-menu-item-group>
                    <el-menu-item index="/maintenceCategoryAdmin">
                      <el-icon><setting /></el-icon>
                      <span>机器类型管理</span>
                    </el-menu-item>
                    <el-menu-item index="/maintenceAdmin">
                      <el-icon><setting /></el-icon>
                      <span>机器管理</span>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
                <el-menu-item index="/staffRegister">
                  <el-icon><setting /></el-icon>
                  <span>注册管理</span>
                </el-menu-item>
  
  
  
                <el-sub-menu index="5">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>人员数据管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/staff">
                      <el-icon><setting /></el-icon>
                      <span>员工数据</span>
                    </el-menu-item>
                    <el-menu-item index="/adminToManager">
                      <el-icon><setting /></el-icon>
                      <span>经理数据</span>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
  
                <el-sub-menu index="6">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>个人信息</span>
                  </template>
  
                  <el-menu-item-group>
                    <el-menu-item index="/modifyInfoAdmin">
                      <el-icon><setting /></el-icon>
                      <span>修改个人信息</span>
                    </el-menu-item>
                    <el-menu-item index="/changePasswordByAdmin">
                      <el-icon><setting /></el-icon>
                      <span>修改密码</span>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
              </el-menu>
            </el-col>
          </el-row>
        </div>
      </el-aside>
  
      <el-container>
        <el-header>
          <div class="header">
            <div id="adminInfo">
              <el-page-header :icon="null" @back="goBack">
              <template #content>
                <div class="userInfo">
                  <el-avatar
                    :size="32"
                    class="mr-3"
                    :src="getImage(form.image)"
                  />
                  <span> {{ form.adminname }}</span>
                  <span
                    class="text-sm mr-2"
                    style="color: var(--el-text-color-regular)"
                  >
                  </span>
                  <el-tag>管理员</el-tag>
                </div>
              </template>
            </el-page-header>
            </div>
  
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </template>
    
    
    
    
    
    <script>
  export default {
    name: "h-Admin",
    data() {
      return {
        isCollapse: true,
        form: {
          image: "",
          adminname: "",
        },
      };
    },
    methods: {
      goBack() {
        console.log("155661516");
        // this.$router.go(-1)
        this.$router.push({ path: "/index" });
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      getImage(image) {
        this.imageUrl = `http://localhost:8989/common/download?name=${image}`;
        return `http://localhost:8989/common/download?name=${image}`;
      },
      findAlltable() {
        let dataStr = localStorage.getItem("loginAdmin");
        let dataObj = JSON.parse(dataStr);
  
        this.form.adminname = dataObj.adminname;
  
        this.form.image = dataObj.image;
  
        console.log();
        console.log(JSON.stringify(this.form));
      },
  
    },
    created() {
      this.findAlltable();
    },
  };
  </script>
    
    <style scoped>
  .el-header {
    padding: 0 !important;
  }
  .Admin {
    width: 100%;
    height: 100%;
  }
  
  .el-menu-vertical-demo {
    width: 200px;
    height: calc(100vh);
  }
  
  .header {
    width: 100%;
    height: 50px;
    background: #b1c1cb;
  }
  .userInfo {
    padding-left: 1000px;
    padding: 10px 0;
    height: 100%;
    display: flex;
    align-items: center;
  }
  #adminInfo{
    padding-left: 1000px;
  }
  
  </style>